<template>
  <div class="analyze-status">
    <div :class="`${fold ? 'fold' : 'unfold'} ${status} ${isGenerating ? 'generating' : ''}`">
      <template v-if="fold">
        <div class="status-icon"></div>
        <div class="status-text">{{ text }}</div>
        <div
          class="controls-container"
          v-if="['pending', 'success'].includes(status) || hasRefresh"
          @click.stop="clickControls"
        >
          <div
            :class="{ 'status-controls': true, [`controls-${fold ? 'fold' : 'unfold'}`]: true }"
          ></div>
        </div>
      </template>
      <template v-else>
        <div class="header">
          <div class="header-left">
            <div class="status-icon"></div>
            <div class="status-text">解析步骤</div>
          </div>
          <div class="controls-container" @click.stop="toggleFold">
            <div
              :class="{ 'status-controls': true, [`controls-${fold ? 'fold' : 'unfold'}`]: true }"
            ></div>
          </div>
        </div>
        <div class="content">
          <template v-if="unfoldStatus === 'loading'">
            <Skeleton :lines="2" :lineWidths="['100%', '75%']" />
          </template>
          <template v-else>
            <Step :steps="steps" />
            <div class="bottom-left" v-if="isGenerating">
              <div class="bottom-icon"></div>
              <div class="status-text">答案生成</div>
            </div>
          </template>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import Step from './Step.vue';
import Skeleton from './Skeleton.vue';
export default {
  components: {
    Step,
    Skeleton
  },
  props: {
    status: {
      type: 'pending' | 'success' | 'error',
      default: 'pending',
      required: true
    },
    // 是否可以重新生成
    hasRefresh: {
      type: Boolean,
      default: false,
      required: true
    },
    // 是否在gc内容
    isGenerating: {
      type: Boolean,
      default: false,
      required: true
    },
    // 步骤内容
    steps: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  data() {
    return {
      fold: false
    };
  },
  computed: {
    /**
     * 根据当前状态返回相应的文本。
     * 该方法定义了一个包含不同状态对应文本的选项对象，然后根据当前的状态返回相应的文本。
     * 如果当前状态没有匹配的选项，则返回空字符串。
     *
     * @returns 返回与当前状态匹配的文本。
     */
    text() {
      // 定义一个包含不同状态对应文本的选项对象。
      const textOptions = {
        // 当状态为pending时，如果isGenerating为true，返回'答案生成'，否则返回'解析步骤'。
        pending: () => (this.isGenerating ? '答案生成' : '解析步骤'),
        // 当状态为success时，返回'智能问答'。
        success: () => '智能问答',
        // 当状态为error时，返回'解析失败'。
        error: () => '解析失败'
      };
      // 根据当前状态返回相应的文本，如果没有匹配的选项，则返回空字符串。
      return (textOptions[this.status] || (() => ''))();
    },

    /**
     * 展开状态方法。
     * 该方法根据当前组件的状态返回相应的字符串表示。
     * 状态映射表 `statusMap` 定义了不同状态下应返回的值：
     * - `pending`：如果步骤列表为空，则返回 'loading'；否则，根据 `isGenerating` 的值返回 'generating' 或 'intent'。
     * - `success`：直接返回 'success'。
     * - `error`：返回空字符串。
     *
     * @returns {string} 当前状态的字符串表示。
     */
    unfoldStatus() {
      const statusMap = {
        pending: () => {
          // 如果步骤列表为空，则返回 'loading'；否则，根据 `isGenerating` 的值返回 'generating' 或 'intent'。
          if (!this.steps.length) {
            return 'loading';
          }
          return this.isGenerating ? 'generating' : 'intent';
        },
        // 直接返回 'success'
        success: () => 'success',
        // 返回空字符串
        error: () => ''
      };
      // 根据当前状态调用相应的方法，如果没有匹配的状态，则返回空字符串。
      return (statusMap[this.status] || (() => ''))();
    }
  },
  methods: {
    clickControls() {
      if (this.status === 'error') {
        this.refresh();
      } else {
        this.toggleFold();
      }
    },
    refresh() {
      this.$emit('refresh');
    },
    toggleFold() {
      this.fold = !this.fold;
    }
  },
  watch: {
    status: {
      handler(nVal, oVal) {
        // undefined 是初始值
        this.fold = ['pending', void 0].includes(oVal) && ['success', 'error'].includes(nVal);
      },
      immediate: true
    },
    steps: {
      handler() {
        this.$emit('scrollToBottom');
      },
      deep: true
    }
  }
};
</script>
<style lang="less" scoped>
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.analyze-status {
  margin-bottom: 8px;
  .status-icon {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-right: 8px;
  }
  .status-text {
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #e9e9f2;
    letter-spacing: 0;
    line-height: 22px;
    font-weight: 600;
  }
  .status-controls {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    &.controls-fold {
      transform: rotate(180deg);
    }
  }
  .pending:not(.generating) {
    .status-icon {
      background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/1a2acf6d-87bb-4aae-aece-22c13b26d4fb.png');
      animation: rotate 1s linear infinite;
    }
  }
  .pending.generating {
    .status-icon {
      background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/897a1434-76a5-43bc-9fb7-98716f710b8d.png');
    }
  }
  .pending {
    .status-controls {
      background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/5da46dcf-9fcb-4f11-af0b-d322f32cd1a9.png');
    }
    &.unfold {
      .bottom-icon {
        background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/1a2acf6d-87bb-4aae-aece-22c13b26d4fb.png');
        animation: rotate 1s linear infinite;
      }
    }
  }
  .controls-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
  }
  .fold {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 46px;
    background: #292933;
    border: 1px solid #292933;
    border-radius: 12px;
    &.success {
      .status-icon {
        background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/bac8544c-2fd1-49d9-ada2-550fadf382b2.png');
      }
      .status-controls {
        background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/5da46dcf-9fcb-4f11-af0b-d322f32cd1a9.png');
      }
    }
    &.error {
      .status-icon {
        background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/240a5554-0e5a-4ed4-8086-bbb5d087dfdc.png');
      }
      .status-controls {
        background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/34d4067c-44be-4bf2-afd2-7a7c7ed5ff76.png');
      }
      .controls-container:hover {
        background: #353543;
        .status-controls {
          background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/3de158a5-d91d-49bb-9f0d-d34906849810.png');
        }
      }
    }
  }
  .unfold {
    width: 400px;
    background: #292933;
    border: 1px solid #292933;
    border-radius: 12px;
    padding: 0 16px;
    .header {
      height: 46px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-left {
        display: flex;
        align-items: center;
      }
    }
    &.success {
      .status-icon {
        background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/897a1434-76a5-43bc-9fb7-98716f710b8d.png');
      }
      .status-controls {
        background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/5da46dcf-9fcb-4f11-af0b-d322f32cd1a9.png');
      }
      &.unfold {
        .bottom-icon {
          background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/23b65591-a5cc-4635-b12b-fe72cb76cd9f.png');
        }
      }
    }
    .content {
      .bottom-left {
        display: flex;
        align-items: center;
        height: 46px;
        .bottom-icon {
          width: 16px;
          height: 16px;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
          margin-right: 8px;
        }
      }
    }
  }
}
</style>
